<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--[if lt IE 9]>
    <script src="../js/jquery-1.11.3.js"></script>
    
<![endif]-->
		<!--[if gte IE 9]><!-->
		<script src="../js/jquery-3.1.1.js"></script>
		<!--<![endif]-->
		<script type="text/javascript">
			function funcss() {
				//				$("#div1 p").css("color","red");
				//				$("#div1 p").css({
				//					"color": "red",
				//					"border": "2px solid red"
				//				});
				/*返回 CSS 属性值：
				$(selector).css(property)
				设置 CSS 属性和值：
				$(selector).css(property,value)
				使用函数设置 CSS 属性和值：
				$(selector).css(property,function(index,currentvalue))
				设置多个属性和值：
				$(selector).css({属性：value, 属性：value, ...})
				 */
				$("#div1 p").css("color",
					function(idx, currentvalue) {
						if(idx == 2)
							return "red"

						else
							return "blue"
					}
				);
			}

			function addClass() {
				$("#div1 p:first").addClass("intro");
			}

			function imgattr() {
				$("#div1 img").attr("width", "500");
			}

			function funoffset() {
				/*返回偏移坐标：
						$(selector).offset()
						设置偏移坐标：
						$(selector).offset({top:value,left:value})
						使用函数设置偏移坐标：
						$(selector).offset(function(index,currentoffset))
						*/
				var x = $("#div1 p:eq(2)")
				o = x.offset();
				x.append("上: " + o.top + " 左: " + o.left);
			}

			function funposition() {
				var x = $("#div1 p:eq(2)")
				o = x.position();
				x.append("上: " + o.top + " 左: " + o.left);
			}

			function funremoveAttr() {
				var $x = $("#div1 p:eq(1)")
				$x.prop("color", "FF0000");
				$x.append("color 属性值为: " + $x.prop("color"));
				$x.removeProp("color");
				$x.append("<br>现在 color 属性值为: " + $x.prop("color"));
			}

			function funremoveAttr() {
				var $x = $("#div2 p:eq(1)")
				$x.removeAttr("style");
			}

			function funremoveClass() {
				var $x = $("#div2 p:eq(2)")
				$x.removeClass("intro");
			}
			function funtoggleClass() {
				var $x = $("#div2 p:eq(2)")
				$x.toggleClass("intro");
			}

			function funscroll() {
				var $x = $("#div3 div")
				$x.scrollTop(100);
				$x.scrollLeft(100);
				$("#div3 p").append($x.scrollLeft() + " px"+$x.scrollTop() + " px"+$x.width()+" px"+$x.height()+" px");
			}
		</script>
		<style type="text/css">
			div {
				border: 1px solid black;
				margin-top: 8px;
			}
			
			.intro {
				font-size: 150%;
				color: red;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<h2>dom的 class</h2>
			<p>这是一个段落。</p>
			<p>这是另一个段落。</p>
			<p>这是另一个段落。</p>
			<p>这是另一个段落。</p>
			<img src="../img/timg2.jpg" alt="Pulpit Rock" width="284" height="213">
			<button onclick="funcss()">设置所有P元素的颜色属性</button>
			<button onclick="addClass()">addClass</button>
			<button onclick="imgattr()">img attr </button><br>
			<button onclick="funoffset()">设置或返回被选元素相对于文档的偏移坐标。 </button><br>
			<button onclick="funposition()">返回元素相对于它的父元素的位置 </button>
			<button onclick="funprop()">添加和删除属性</button>
		</div>
		<div id="div2">
			<h2>dom的 attr</h2>
			<p style="font-size:120%;color:red">这是一个段落。</p>
			<p style="font-weight:bold;color:blue">这是另一个段落。</p>
			<p class=intro> 这是另一个段落。</p>
			<p>这是另一个段落。</p>

			<button onclick="funremoveAttr()">删除 attr</button>
			<button onclick="funremoveClass()">删除class</button>
			<button onclick="funtoggleClass()">切换class</button>
		</div>
		<div id="div3">
			<h2>dom的 scroll</h2>
			<div style="border:1px solid black;width:300px;height:100px;overflow:auto">
				The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis. The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis. The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis. The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
			</div><br>
			<p/>
			<button onclick="funscroll()">滚动属性</button>
		
		</div>
	</body>

</html>